<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../../../res/jquery.min.js"></script>
    <script src="../../../src/bs.base.js"></script>
    <script src="../../../src/bs.utils.js"></script>
    <script src="../../../src/bs.using.js"></script>
</head>
<body>
   <input type="text" id="keyword" value="" />
    <span id="tempId"></span>
</body>
<script>
   $(document).ready(function(){
       var emails = [
           { name: "Peter Pan", to: "peter@pan.de" },
           { name: "Molly", to: "molly@yahoo.com" },
           { name: "Forneria Marconi", to: "live@japan.jp" },
           { name: "Master <em>Sync</em>", to: "205bw@samsung.com" },
           { name: "Dr. <strong>Tech</strong> de Log", to: "g15@logitech.com" },
           { name: "Don Corleone", to: "don@vegas.com" },
           { name: "Mc Chick", to: "info@donalds.org" },
           { name: "Donnie Darko", to: "dd@timeshift.info" },
           { name: "Quake The Net", to: "webmaster@quakenet.org" },
           { name: "Dr. Write", to: "write@writable.com" }
       ];
       var opts = {
           formatItem: function (row, i, max) {
               return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";
           },
           formatResult: function (row, i, max) {
               return row.name + " " + row.to;
           },
           formatResult: function (row) {
               return row.to;
           }
       };
       bs.autocomplete('#keyword', emails, function (event, data, formatted) {
           $('#tempId').html(data.name);
       }, opts);
   });

</script>
</html>